<template>
	<view class="">
		<uni-nav-bar :fixed="true" shadow left-icon="left" title="个人信息"  status-bar @clickLeft="back" :border="false"/>
		<view class="myInfo">
			<view class="info">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar" :src="userInfo.avatarUrl" mode="aspectFill"></image>
				</button>
				
				<view class="nickname-wrapper">
				  <text class="nickname-label">昵称</text>
				  <input type="nickname" class="nickname-input" :placeholder="userInfo.nickName" @change="onInputChange" :value="userInfo.nickName"/>
				</view>
			</view>
			
			<view class="bt">
				<u-button type="primary" text="保存信息" @click="save()"></u-button>
				<view class="" style="margin: 25rpx;">
					
				</view>
				<u-button type="error" text="退出登录" @click="exit()" ></u-button>
			</view>
		</view>
	</view>
</template>

<script>
import {updateInfo} from '@/api/user.js'
	export default {
		data() {
			return {
				userInfo: {
				  avatarUrl: 'https://web-kotori.oss-cn-beijing.aliyuncs.com/dbf76c48-964a-4ddb-a58b-389eb81a1378.jpg',
				  nickName: '微信用户',
				},
			}
		},
		onReady(){
			this.init()
		},
		methods: {
			init(){
				this.userInfo.avatarUrl = this.$store.getters.userInfo.avatar ? this.$store.getters.userInfo.avatar:this.userInfo.avatarUrl
				this.userInfo.nickName = this.$store.getters.userInfo.name ? this.$store.getters.userInfo.name : this.userInfo.nickName
				
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			onChooseAvatar(e) {
					console.log(e)
					const { avatarUrl } = e.detail
					const { nickName } = this.userInfo
					this.userInfo.avatarUrl = avatarUrl
				},
			onInputChange(e) {
			    const nickName = e.detail.value
			    const { avatarUrl } = this.userInfo
				this.userInfo.nickName = nickName
			  },
			save(){
				console.log("save")
				console.log(this.userInfo)
				const config = {
					name: this.userInfo.nickName,
					avatar: this.userInfo.avatarUrl,
					id: this.$store.getters.userInfo.id
				}
				updateInfo(config).then(res=>{
					console.log(res)
					this.$store.getters.userInfo.avatar = this.userInfo.avatarUrl
					this.$store.getters.userInfo.name = this.userInfo.nickName
					this.$store.dispatch('login',this.$store.getters.userInfo)
					uni.showToast({
						title:"更新成功"
					})
					uni.navigateBack({
						delta:1
					})
				}).catch(err=>{
					uni.showToast({
						title:"更新失败"
					})
				})
			},
			exit(){
				console.log("exit")
				this.$store.dispatch('logout')
				uni.navigateTo({
					url:'/pages/home/home'
				})
			}
		}
	}
</script>

<style scoped>

.nickname-wrapper {
  display: flex;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-top: .5px solid rgba(0, 0, 0, 0.1);
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
  color: black;
  margin-top: 28rpx;
}

.nickname-label {
  width: 105px;
}

.nickname-input {
  flex: 1;
}

.info{
	width: 90%;
	margin-left: 50rpx;
}

.avatar{
	width: 300rpx;
	height: 300rpx;
	margin-left: -26rpx;
}

.avatar-wrapper{
	width: 300rpx;
	height: 300rpx;
	margin-top: 50rpx;
}

.myInfo{

}

.bt{
	/* margin-top: 450rpx; */
	position: fixed;
	bottom: 100rpx;
	width: 95%;
	margin-left: 20rpx;
}
</style>
